<template>
  <van-popup
    v-model:show="h5pop"
    position="bottom"
    closeable
    close-icon="close"
    round
    @click-overlay="onClickCloseIcon"
    @click-close-icon="onClickCloseIcon"
  >
    <div class="pop-wrap">
      <div class="pop-wrap-head">
        <img class="pop-wrap-head-img" src="@/assets/popFrame/pop_dache.png">
        <div class="pop-wrap-head-info">
          <div class="title">{{ pageInfo[0].title }}</div>
          <div>{{ pageInfo[0].describle }}</div>
        </div>
      </div>
      <div class="pop-wrap-content">
        <div class="pop-wrap-content-flex">
          <div class="pop-wrap-content-flex-item" @click.stop="addToDesktop">
            <div class="pop-wrap-content-flex-item-image">
              <img src="@/assets/popFrame/desktop.png" mode="aspectFill">
            </div>
            <div>添加到桌面</div>
          </div>
          <div class="pop-wrap-content-flex-item" @click.stop="shareFn">
            <div class="pop-wrap-content-flex-item-image">
              <img src="@/assets/popFrame/share.png" mode="aspectFill">
            </div>
            <div>分享</div>
          </div>
          <div class="pop-wrap-content-flex-item" @click.stop="returnHomePage">
            <div class="pop-wrap-content-flex-item-image">
              <img src="@/assets/popFrame/homePage.png" mode="aspectFill">
            </div>
            <div>回到首页</div>
          </div>
        </div>
        <div class="pop-wrap-content-flex">
          <div class="pop-wrap-content-flex-item" @click.stop="contactFn">
            <div class="pop-wrap-content-flex-item-image">
              <img src="@/assets/popFrame/customer.png" mode="aspectFill">
            </div>
            <div>客服</div>
          </div>
          <div class="pop-wrap-content-flex-item" @click.stop="reenter">
            <div class="pop-wrap-content-flex-item-image">
              <img src="@/assets/popFrame/reenter.png" mode="aspectFill">
            </div>
            <div>重新进入</div>
          </div>
        </div>
      </div>
      <div class="pop-wrap-btn" @click="onClickCloseIcon">取消</div>
    </div>
    <div :style="{ height: safeFlag ? '90rpx' : '22rpx', 'background-color': '#fff' }" />
  </van-popup>
</template>

<script>

export default {
  props: {
    poptypes: {
      type: String,
      default: ''
    },
    h5pop: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      pageInfo: [{
        image: '@/assets/popFrame/pop_dache.png',
        title: '总行智慧食堂',
        describle: '在线充值、扫码取餐、预订配送',
        appId: '24051400',
        thumbUrl: 'my_company_dc desktop.png'
      }],
      safeFlag: localStorage.getItem('safeFlag') || false // 获取安全距离

    }
  },
  created() {},
  methods: {
    // 添加到桌面
    addToDesktop() {
      if (window.sensors) {
        window.sensors.quick('trackAllHeatMap', event.target, {
          $title: '总行_食堂_首页',
          firefly_click_area: '总行_食堂_首页_添加到桌面',
          firefly_click_name: '添加到桌面'
        })
        //     window.sensors.trackCustom({
		  // custom_type: 'firefly_exposure',
		  // firefly_ctm_page: '总行_食堂_首页',
		  // firefly_ctm_area: '总行_食堂_首页_添加到桌面',
		  // firefly_ctm_prodName: '添加到桌面'
        //     })
      }
      // TODO 需要确认appIcon是否可继续使用
      if (window && window.AlipayJSBridge) {
        var inputParam = {
          appId: '24051400', // 需要添加桌面和分享的小程序，不传默认当前小程序的appId
          business_code: '', // 交易码，选填
          business_id: 'wisdom_canteen_webview', // 交易id，选填
          business_name: '', // 交易名称，选填
          business_grant: '00', // 交易权限，请根据实际情况填写，不明确填00
          business_kind: '1', // 交易类型，必填，1是离线包，2是h5
          url: '24051400', // 必填，交易离线包id或者H5链接 TODO 按需填写id
          business_login: '1', // 必填，是否需要登录前置，1是登录后移，0是登录前置
          business_param: {}, // 交易参数
          appIcon: 'wisdom_canteen_webview_desktop.png', // 桌面图标链接，必填
          appName: '食堂', // 必填，桌面快捷方式显示名称
          description: '在线充值、扫码取餐、预订配送、在线管理、人脸支付'
        }
        AlipayJSBridge.call('addToDesktop', inputParam)
      } else {
        this.$pubFuc.notify('addToDesktop方法没有获取成功')
      }
    },
    // 分享
    shareFn() {
      if (window.sensors) {
        window.sensors.quick('trackAllHeatMap', event.target, {
          $title: '总行_食堂_首页',
          firefly_click_area: '总行_食堂_首页_分享',
          firefly_click_name: '分享'
        })
        //     window.sensors.trackCustom({
		  // custom_type: 'firefly_exposure',
		  // firefly_ctm_page: '总行_食堂_首页',
		  // firefly_ctm_area: '总行_食堂_首页_分享',
		  // firefly_ctm_prodName: '分享'
        //     })
      }
      if (window && window.AlipayJSBridge) {
        var platformsObj = {
          method: 'setPlatforms',
          platforms: [{
            title: '微信好友',
            image: 'share_wechat.png',
            scence: 0,
            type: 'native',
            method: ''
          },
          {
            title: '朋友圈',
            image: 'share_wechat_timeline.png',
            scence: 1,
            type: 'native',
            method: ''
          }
          ]
        }
        // AlipayJSBridge.call("abcShare", platformsObj);
        var paramsObj = {
          method: 'setShareLink',
          title: '食堂',
          description: '在线充值、扫码取餐、预订配送、在线管理、人脸支付',
          linkUrl: 'https://wx.abchina.com/webank/main-view/openTagForZHMarketingSes?id=%2BwenJ0hvCug%3D',
          thumbUrl: ''
        }
        AlipayJSBridge.call('abcShare', paramsObj)
        AlipayJSBridge.call('abcShare', {
          method: 'openShare'
        })
      } else {
        console.log('abcShare方法没有获取成功')
      }
    },
    // 回到首页
    returnHomePage() {
      if (window.sensors) {
		  window.sensors.quick('trackAllHeatMap', event.target, {
		    $title: '总行_食堂_首页',
		    firefly_click_area: '总行_食堂_首页_回到首页',
		    firefly_click_name: '回到首页'
		  })
		  // window.sensors.trackCustom({
		  //   custom_type: 'firefly_exposure',
		  //   firefly_ctm_page: '总行_食堂_首页',
		  //   firefly_ctm_area: '总行_食堂_首页_回到首页',
		  //   firefly_ctm_prodName: '回到首页'
		  // })
      }
      if (window && window.AlipayJSBridge) {
        AlipayJSBridge.call('openHome')
      } else {
        console.log('openHome方法没有获取成功')
      }
    },
    // 联系客服
    contactFn() {
      if (window.sensors) {
		  window.sensors.quick('trackAllHeatMap', event.target, {
          $title: '总行_食堂_首页',
          firefly_click_area: '总行_食堂_首页_联系客服',
          firefly_click_name: '联系客服'
		  })

        // window.sensors.trackCustom({
        //   custom_type: 'firefly_exposure',
        //   firefly_ctm_page: '总行_食堂_首页',
        //   firefly_ctm_area: '总行_食堂_首页_联系客服',
        //   firefly_ctm_prodName: '联系客服'
        // })
      }
      if (window && window.AlipayJSBridge) {
        AlipayJSBridge.call('pushWindow', {
          url: `${process.env.VUE_APP_CONTACTURL}`,
          param: {
            readTitle: true,
            showOptionMenu: false
          }
        })
      } else {
        document.addEventListener('AlipayJSBridgeReady', () => {
          AlipayJSBridge.call('pushWindow', {
            url: `${process.env.VUE_APP_CONTACTURL}`,
            param: {
              readTitle: true,
              showOptionMenu: false
            }
          })
        }, false)
      }
    },
    // 重新进入
    reenter() {
      if (window.sensors) {
        window.sensors.quick('trackAllHeatMap', event.target, {
          $title: '总行_食堂_首页',
          firefly_click_area: '总行_食堂_首页_重新进入',
          firefly_click_name: '重新进入'
        })
        // window.sensors.trackCustom({
        //   custom_type: 'firefly_exposure',
        //   firefly_ctm_page: '总行_食堂_首页',
        //   firefly_ctm_area: '总行_食堂_首页_重新进入',
        //   firefly_ctm_prodName: '重新进入'
        // })
      }
      // 因为只有在H5页面才会用到此方法，所以不用判断小程序
      if (window && window.AlipayJSBridge) {
        AlipayJSBridge.call('startApp', {
          appId: '24051400', // 写死， TODO 按需写appId
          closeCurrentApp: true,
          param: {
            url: '/www/index.html#/home',
            appName: '总行智慧食堂',
            appIcon: 'icon.png'
          }
        })
      } else {
        document.addEventListener('AlipayJSBridgeReady', () => {
          AlipayJSBridge.call('startApp', {
            appId: '24051400', // 写死，员工的id TODO 按需写appId
            closeCurrentApp: true,
            param: {
              url: '/www/index.html#/home',
              appName: '总行智慧食堂',
              appIcon: 'icon.png'
            }
          })
        }, false)
      }
    },
    // 点击取消按钮
    onClickCloseIcon() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped lang="less">
  .pop-wrap {
    width: 100%;
    border-radius: 20px 20px 0 0;
    background-color: #f7f7f7;

    .pop-wrap-head {
      display: flex;
      width: calc(100% - 64px);
      margin-left: 32px;
      padding: 30px 0;

      img {
        width: 124px;
        height: 124px;
        margin-right: 32px;
      }

      .pop-wrap-head-info {
        padding-top: 12px;
        padding-bottom: 6px;
        font-size: 26px;
        color: #666666;
        line-height: 50px;

        .title {
          font-size: 32px;
          color: #333;
          line-height: 56px;
        }
      }
    }

    .pop-wrap-content {
      .pop-wrap-content-flex {
        display: flex;
        border-top: 2px solid #e5e5e5;
        padding: 32px 29px;

        &:first-child {
          padding-top: 40px;
        }

        &:last-child {
          padding-bottom: 60px;
        }

        .pop-wrap-content-flex-item {
          width: 130px;
          text-align: center;
          font-size: 26px;
          color: #333;
          margin-right: 58px;

          .pop-wrap-content-flex-item-image {
            margin: 0 21px 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 88px;
            height: 88px;
            border-radius: 20px;
            background-color: #fff;

            img {
              width: 56px;
              height: 56px;
            }
          }
        }
      }
    }

    .pop-wrap-btn {
      text-align: center;
      line-height: 100px;
      width: 100%;
      height: 100px;
      font-size: 36px;
      color: #ffa900;
      border-top: 2px solid #e5e5e5;
      background-color: #fff;
    }
  }
</style>
